<template>
	<view class="content" v-if="show">
		<view class='flex flex-pack-justify' style="padding: 30rpx;">
			<uv-icon @click="onBack" size="40rpx" name='arrow-leftward' color="black"></uv-icon>
			<navigator open-type="switchTab" url="/pages/index/order">我的订单</navigator>
		</view>
		<view class='card'>
			<view class='cardtitle flex' style="border-bottom: 1px solid ghostwhite;padding-bottom: 10rpx;"><image style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" :src="good.logo"></image>{{good.title}}</view>
			<uv-input v-model="mobile" type="tel" style="border-bottom: 1px solid gainsboro;padding: 20rpx 0;" fontSize="32rpx" placeholder="请输入充值号码" border="none" suffixIcon='edit-pen' :suffixIconStyle="{fontSize: '46rpx',color:'gray'}"></uv-input>
			<view class="flex" style="color: orangered;font-size: 26rpx;margin-top: 30rpx;"><uv-icon style="margin-right: 10rpx;" name='info-circle-fill' color="orangered"></uv-icon>请仔细核对充值账号</view>
			<view class="flex" style="color: orangered;font-size: 26rpx;margin-top: 10rpx;"><uv-icon style="margin-right: 10rpx;" name='info-circle-fill' color="orangered"></uv-icon>请仔细阅读下方充值须知，虚拟商品不支持退款</view>
		</view>
		<view class='card'>
			<view class='cardtitle'>充值规格</view>
			<view class='feeitems' style="grid-template-columns: 1fr 1fr;">
				<view class='feeitem' :class="{active:tab == k}" v-for="(g,k) in good.list" @click="tab = k,ptab = 0">
					<view class='feeprice' style="margin: 0;">{{g.title}}</view>
				</view>
			</view>
		</view>
		<view class='card'>
			<view class='cardtitle'>充值价格</view>
			<view class='feeitems'>
				<view class='feeitem gitem' :class="{active:ptab == k}" v-for="(g,k) in good.list[tab].list" @click="ptab = k">
					{{g.title}}
					<view class='feeprice'><text>￥</text>{{g.pay}}</view>
					<view class='oldprice'>原价￥{{g.oldprice}}</view>
					<view class='feetag'>限时{{g.discount}}折</view>
				</view>
			</view>
		</view>
		<view class='card'>
			<view class='cardtitle'>充值须知</view>
			<view style="white-space: pre-line;">{{good.rule}}</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class='buybtn' @click="onPay">立即充值 ￥{{good.list[tab].list[ptab].pay}} <text style="margin-left: 10rpx;">(原￥{{good.list[tab].list[ptab].oldprice}})</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				good:false,
				mobile:'',
				tab:0,
				ptab:0,
			}
		},
		onLoad(option) {
			var t = this;
			this.util.post('good',{gid:option.gid},(r)=>{
				t.show = true;
				t.good = r.good;
				getApp().globalData.setShareInfo(r.sharedata);
			})
		},
		methods: {
			onBack(){
				uni.navigateBack()
			},
			onPay(){
				if(this.mobile == '') return uni.showToast({title:'请输入号码',icon:'none'});
				var t = this;
				var data = {type:10,mobile:this.mobile,gid:this.good.list[this.tab].list[this.ptab].id};
				this.util.post('order/pay',data,(res)=>{
					if(res.code != 1) return uni.showToast({title:res.msg,icon:'none'});
					if (typeof WeixinJSBridge == 'undefined'){
					   if( document.addEventListener ){
						   document.addEventListener('WeixinJSBridgeReady', function(){onBridgeReady();}, false);
					   }else if (document.attachEvent){
						   document.attachEvent('WeixinJSBridgeReady', function(){onBridgeReady();});
						   document.attachEvent('onWeixinJSBridgeReady', function(){onBridgeReady();});
					   }
					}else{
					   onBridgeReady();
					}
					function onBridgeReady(){
						WeixinJSBridge.invoke(
						  'getBrandWCPayRequest', {
							 'appId':res.data.appid,
							 'timeStamp':res.data.timeStamp,
							 'nonceStr':res.data.nonceStr,
							 'package':res.data.package,
							 'signType':res.data.signType,
							 'paySign':res.data.paySign
						  },
						  function(res){
							  if(res.err_msg == 'get_brand_wcpay_request:ok' ){
								 uni.showToast({
									 title: '支付成功'
								 });
								 uni.switchTab({
								 	url:'/pages/index/order'
								 })
							  }else alert('支付失败');
						  }
					   );
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		background-image: linear-gradient(180deg,#2A89F8 0%,#f4f5f9 80%);
		.feeitems{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 20rpx;
			.feeitem{
				position: relative;
				border: 1px solid gainsboro;
				padding: 30rpx;
				font-size: 26rpx;
				border-radius: 16rpx;
				text-align: center;
				&.gitem{
					padding: 50rpx 20rpx 20rpx;
					.feeprice{
						margin: 20rpx 0;
						text{
							font-size: 32rpx;
						}
					}
				}
				&.active{
					border-color: #2A89F8;
					color: #2A89F8;
					background: rgba(42, 137, 248, 0.1);
				}
				.feeprice{
					margin-bottom: 30rpx;
					font-size: 46rpx;
				}
				.oldprice{
					text-decoration: line-through;
					color: gray;
					font-size: 26rpx;
				}
				.feetag{
					position: absolute;
					background: #e94f55;
					color: white;
					font-size: 24rpx;
					border-radius: 8rpx;
					padding: 4rpx 8rpx;
					top: -10rpx;
					left: 0;
				}
			}
		}
		.buybtn{
			background: #2A89F8;
			border-radius: 50rpx;
			display: flex;
			align-items: baseline;
			justify-content: center;
			font-size: 36rpx;
			color: white;
			padding: 20rpx 0;
			position: fixed;
			bottom: 50rpx;
			width: 90%;
			left: 5%;
			text{
				text-decoration: line-through;
				font-size: 28rpx;
			}
		}
	}
</style>
